import { RadioGroup, Radio } from "@design-system/headless";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

<Meta
  title="Design-system/Headless/RadioGroup"
  component={RadioGroup}
  args={{
    label: "Radio group",
    children: (
      <>
        <Radio value="option 1">Option 1</Radio>
        <Radio value="option 2">Option 2</Radio>
      </>
    ),
  }}
/>

export const Template = (args) => <RadioGroup {...args} />;

# RadioGroup

A Radio group is a group of radio buttons that are related to each other in some way. For example, they may all represent a single question on a survey. The Radio group component is a headless component that provides the logic and accessibility implementation for a group of radio buttons.

Note: The `<input="radio" />` is visually hidden by default. Use the `<span data-icon />` to render custom looking radio.

<Canvas>
  <Story name="RadioGroup">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="RadioGroup" of={RadioGroup} />
